<template>
    <a-card :bordered="false" style="background-color: #003366ff;">
        <a-row>
            <a-col :span="12">
                <div style=" height:500px;">
                    <div id="chart_example" style=" width: 100%; height: 100%;"></div>
                </div>
            </a-col>
            <a-col :span="12">
                <div class="echartsBorder">
                    <div id="main" style=" width: 90%; height: 100%;"></div>
                </div>
                <div class="message-title">

                    <a-select
                            style="width: 50%; margin-right: 5px;"
                            showSearch
                            optionFilterProp="children"
                            placeholder="请选择搜索内容"
                            v-model="selectedValue"
                            @search="search">
                        <a-spin slot="notFoundContent" size="small"/>
                        <a-select-option value="请重新选择">全部</a-select-option>
                        <a-select-option v-for="d in purchaseOrderList" :key="d.puid" :value="d.poNoAndPoItemNo">{{
                            d.poNoAndPoItemNo }}
                        </a-select-option>
                    </a-select>
                </div>
                <div style="border: 3px solid #0f3b75ff;">
                    <div style="background-color: #19417f7f;color: #ffffff;height: 50px;line-height: 50px;text-align: center;">
                        <a-row>
                            <a-col :span="5">采购订单编号</a-col>
                            <a-col :span="3">供应商</a-col>
                            <a-col :span="2">省份</a-col>
                            <a-col :span="9">工程项目名称</a-col>
                            <a-col :span="2">数量</a-col>
                            <a-col :span="3">签订时间</a-col>
                        </a-row>
                    </div>
                    <div class="scroll-wrap">
                        <div class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()">
                            <ul>
                                <a-row>
                                    <li v-for="(item,index) in purchaseOrderList">
                                        <a-col :span="5"
                                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{
                                            item.poNoAndPoItemNo }}
                                        </a-col>
                                        <a-col :span="3"
                                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{
                                            item.supplierCode==='1000015019'?'平高电气':item.supplierCode==='1000014563'?'平芝公司':''}}
                                        </a-col>
                                        <a-col :span="2"
                                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{
                                            item.substr }}
                                        </a-col>
                                        <a-col :span="9"
                                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{
                                            item.prjName }}
                                        </a-col>
                                        <a-col :span="2"
                                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{
                                            item.amount }}
                                        </a-col>
                                        <a-col :span="3"
                                               style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{
                                            item.sellerSignTime }}
                                        </a-col>
                                    </li>
                                </a-row>
                            </ul>
                        </div>
                    </div>
                </div>
            </a-col>
        </a-row>
    </a-card>
</template>

<script>
    // 首先要 cnpm install echarts
    import echarts from 'echarts'
    import '../../../../node_modules/echarts/map/js/china.js'
    import {deleteAction, postAction, getAction, downFile} from '@/api/manage'
    import {JeecgListMixin} from '@/mixins/JeecgListMixin'

    export default {
        mixins: [JeecgListMixin],
        data() {
            return {
                poNoAndPoItemNo: '',
                supplierCode: '',
                substr: '',
                prjName: '',
                amount: 0,
                sellerSignTime: null,
                intnum: undefined,
                activeIndex: 0,
                purchaseOrderList: [],
                selectedValue: [],//下拉列表
                mapData: [],
                province: [],
                provinceTotal: []
            }
        },
        computed: {
            top() {
                return -this.activeIndex * 50 + 'px'
            }
        },
        created() {
            this.ScrollUp()

        },
        methods: {
            //滚动
            ScrollUp() {
                this.intnum = setInterval(_ => {
                    if (this.activeIndex < this.purchaseOrderList.length) {
                        this.activeIndex += 1
                    } else {
                        this.activeIndex = 0
                    }
                    ;
                }, 1000)
            },
            Stop() {
                clearInterval(this.intnum)
            },
            Up() {
                this.ScrollUp()
            },
            search(selectedValue) {
                let date = new Date()
                let year = date.getFullYear()
                let sellerSignTime = year + '-1-1'
                let params = {'supplierCode': '1000015019', 'sellerSignTime': sellerSignTime, 'param': selectedValue}
                getAction('/eipPurchaseOrder/selectByParam', params).then(res => {
                    this.purchaseOrderList = res.result
                })
            },
            initMapData(mapData) {
                let myChart = echarts.init(document.getElementById('chart_example'))
                myChart.setOption({
                    tooltip: {
                        //                    show: false //不显示提示标签
                        trigger: 'item',
                        backgroundColor: 'rgba(0,0,0,0.6)', //提示标签背景颜色
                        textStyle: {
                            color: '#ffffff'
                        }, //提示标签字体颜色
                        formatter: function (params) {
                            let dotHtmlOne =
                                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#73DEB4"></span>'
                            let relVal = params.name + '<br/>'
                            relVal += dotHtmlOne + params.value
                            return relVal
                        }
                    },
                    series: [{
                        type: 'map',
                        mapType: 'china',
                        zoom: 1.2,
                        label: {
                            normal: {
                                show: true, //显示省份标签
                                textStyle: {
                                    color: '#ffffff'
                                } //省份标签字体颜色
                            },
                            emphasis: { //对应的鼠标悬浮效果
                                show: true,
                                textStyle: {
                                    color: '#000000'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: .5, //区域边框宽度
                                borderColor: '#ffffff', //区域边框颜色
                                areaColor: '#99a6b3ff' //区域颜色
                            },
                            emphasis: {
                                borderWidth: .5,
                                borderColor: '#ffffff',
                                areaColor: '#3468b0ff'
                            }
                        },
                        data: mapData
                    }]
                })
                myChart.on('click', (param) => {
                    if (param.value > 0) {
                        localStorage.setItem('buyerName', param.name)
                        localStorage.setItem('supplierCode','1000015019')
                        this.$router.push({
                            path: '/eipPurchaseOrder/list'
                        })
                    }
                })
            },
            selectMapData() {
                // let date = new Date()
                // let year = date.getFullYear()
                // let sellerSignTime = year + '-1-1'
                // params[ 'sellerSignTime']=sellerSignTime
                let params = {'supplierCode': '1000015019'}
                getAction('/eipPurchaseOrder/selectMapData', params).then(res => {
                    this.initMapData(res.result)
                })
            },
            initChartContractByProvinceTotal(province, provinceTotal) {
                let myChart = this.$echarts.init(document.querySelector('#main'))
                myChart.setOption({
                    color: ['#3398DB'],
                    title: {
                        text: '按省份合同统计',
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: province,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    }],
                    series: [{
                        name: '合同数量',
                        type: 'bar',
                        barWidth: '40%',
                        data: provinceTotal
                    }]
                })
            },
            selectContractProvinceTotal() {
                let date = new Date()
                let year = date.getFullYear()
                let sellerSignTime = year + '-1-1'
                let params = {'supplierCode': '1000015019', 'sellerSignTime': sellerSignTime}
                getAction('/eipPurchaseOrder/selectContractProvinceTotal', params).then(res => {
                    this.initChartContractByProvinceTotal(res.result.province[0], res.result.provinceTotal[0])
                })
            }
        },
        mounted() {
            this.search()
            this.selectMapData()
            this.selectContractProvinceTotal()
        }
    }
</script>

<style scoped>
    ul,
    li {
        padding: 0;
        margin: 0;
        list-style: none
    }

    .message-title:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .message-title {
        *zoom: 1;
        /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

    .message-title {
        border-bottom: 1px solid rgb(144, 136, 136);
    }

    .scroll-wrap {
        height: 300px;
        overflow: hidden;
    }

    .scroll-content {
        position: relative;
        transition: top 0.5s;
    }

    .scroll-content ul li {
        line-height: 50px;
        text-align: center;
        color: #ffffff;
    }

    .scroll-content ul li:hover {
        cursor: pointer;
        color: rgb(21, 128, 250);
    }

    .echartsBorder {
        border-radius: 20px 0 20px 0;
        background-color: #032857ff;
        margin: 10px;
        height: 250px;
        width: 95%;
        border: 3px solid #0f3b75ff;
    }
</style>
